<template>
  <swiper :options="swiperOption" class="swiper-container-banner">
    <slot></slot>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
  export default {
    props: {
      carouselArr: {
        type: Array,
        required: true,
        default: function () {
          return []
        }
      },
      customClass: {
        type: String,
        default: 'swiper-container'
      }
    },
    data() {
      return {
        swiperOption: {
          el: '.swiper-container-banner',
          loop: true,
          pagination: {
            el: '.swiper-container-banner .swiper-pagination',
            clickable: true,
            bulletActiveClass: 'my-bullet-active',
            bulletClass: 'swiper-pagination-bullet'
          },
          autoplay: {
            delay: 4000,
            disableOnInteraction: false
          },
          observer: true, //修改swiper自己或子元素时，自动初始化swiper
          observeParents: true, //修改swiper的父元素时，自动初始化swiper
        }
      }
    },
  }
</script>
<style lang="less">
  .swiper-container-banner {
    height: 2.84rem;

    .swiper-pagination-bullets .swiper-pagination-bullet {
      background: #fff;
      opacity: 1;
      margin: 0 6px;
    }

    .swiper-slide img {
      display: block;
      height: 100%;
    }

    .my-bullet-active {
      background: #fff;
      opacity: 1;
      position: relative;

      &:after {
        content: '';
        display: block;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 1px solid #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
      }
    }
  }
</style>
